import React, { useState, FC } from 'react'
import { connect } from 'dva'
import { Button, Tabs } from 'antd'
import styles from './style.less'
import pageConfig from './config/pageConfig'
import { LoadingModule } from '@/components'
import { isEmpty } from 'lodash'
const { namespace, pageName } = pageConfig
const { TabPane } = Tabs

interface PageProps {}
interface GlobalIProps {
    label: string
    value: string | number
}
const Page: FC<PageProps> = (props: any) => {
    const {
        actions,
        [namespace]: { isEnumLoading, tabsKey, tabsList, globalData },
    }: any = props

    // 当需要更新全局控制变量时调用此函数 会自动进行数据切换
    function updateGlobal(data: GlobalIProps) {
        actions.updateGlobalData({
            globalData: {
                label: '西北区域',
                value: '004',
            },
        })
    }
    // tabs的切换函数
    function updateChange(tabsKey: string) {
        actions.updateTabsKey({
            tabsKey,
        })
    }
    return (
        <>
            <div className='pageTitle'>{pageName}</div>
            {isEnumLoading ? (
                <LoadingModule />
            ) : (
                <div className='pageBox'>
                    {!isEmpty(globalData) && (
                        <div className={styles.page_global}>
                            <span className={styles.title_span}>{globalData.label}</span>
                            <Button type='primary'>选择区域</Button>
                        </div>
                    )}

                    <div className='contentPrimary'>
                        <Tabs type='card' activeKey={tabsKey} onChange={updateChange}>
                            {Array.isArray(tabsList) &&
                                tabsList.map((item: any) => {
                                    return <TabPane tab={item.label} key={item.value} />
                                })}
                        </Tabs>
                    </div>
                </div>
            )}
        </>
    )
}

// 配置model
const mapStateToProps = (props: any) => {
    return {
        [namespace]: props[namespace],
    }
}

// 处理状态
const mapDispatchToProps = (dispatch: any) => {
    return {
        actions: {
            updateGlobalData(payload: any, callback: any) {
                dispatch({
                    type: `${namespace}/fetchUpdateGlobalData`,
                    payload,
                    callback,
                })
            },
            updateTabsKey(payload: any, callback: any) {
                dispatch({
                    type: `${namespace}/fetchUpdateTabsToList`,
                    payload,
                    callback,
                })
            },
        },
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Page)
